<template>
  <div class="m-percent-pond">
    <div class="m-dv-percent-pond">
      <dv-percent-pond :config="config" />
    </div>
    <div class="title">{{ props.title }}</div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  percent: {
    type: Number,
    default: 0
  },
  colors: {
    // 颜色渐变 colors: ['#01c4f9', '#c135ff']
    type: Array
  }
})

const config = computed(() => {
  return {
    value: props.percent,
    colors: props.colors
  }
})
</script>

<style lang="less" scoped>
.m-percent-pond {
  .m-dv-percent-pond {
    padding: 10px;
    .dv-percent-pond {
      width: 100%;
      height: 42px;
    }
  }
  .title {
    padding: 5px;
    line-height: 1.2;
    font-size: 22px;
    text-align: center;
    color: aqua;
    // color: #35a3b6;
    font-family: serif;
  }
}
</style>
